<template>
  <div class="box-card">
    <el-row :gutter="20">
      <!-- 用户信息 -->
      <el-col :span="8" class="mbg10">
        <el-card shadow="hover" class="mgb20" style="height: 252px">
          <div class="user-info">
            <el-avatar
              :size="120"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <div class="user-info-content">
              <div class="user-info-name">{{ userState.userName }}</div>
              <div>{{ getRole(userState.role) }}</div>
            </div>
          </div>
          <div class="user-info-list">
            上次登录时间
            <span>2024-03-06</span>
          </div>
          <div class="user-info-list">
            上次登录地点
            <span>东莞</span>
          </div>
        </el-card>
        <el-card shadow="hover" class="mgb20" style="height: 292px">
          <template #header>
            <div class="clearfix">
              <span>语言详情</span>
            </div>
          </template>
          Vue
          <el-progress :percentage="79.4" color="#42b983"></el-progress>
          TypeScript
          <el-progress :percentage="14" color="#f1e05a"></el-progress>
          CSS
          <el-progress :percentage="5.6"></el-progress>
          HTML
          <el-progress :percentage="1" color="#f56c6c"></el-progress>
        </el-card>
      </el-col>
      <!-- 右边信息查看 -->
      <el-col :span="16" class="mbg10">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <el-icon class="grid-con-icon">
                  <User />
                </el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">1234</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <el-icon class="grid-con-icon">
                  <ChatDotRound />
                </el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div>员工数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <el-icon class="grid-con-icon">
                  <Goods />
                </el-icon>
                <div class="grid-cont-right">
                  <div class="grid-num">5000</div>
                  <div>商品数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 434px">
          <div>
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="通知" name="first"> </el-tab-pane>
              <el-tab-pane label="公告" name="second"></el-tab-pane>
            </el-tabs>
            <div v-for="item in currentList" :key="item.id">
              <ul class="current-list">
                <li>
                  <a href="#">
                    <h5 class="overfloat-dot">
                      {{ item.noticeTitle }}
                    </h5>
                    <span>{{
                      utils.formateDate(new Date(item.createTime))
                    }}</span>
                  </a>
                </li>
                <!-- <span>{{ item.noticeContent }}</span> -->
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, reactive, defineExpose } from 'vue'
import { useUserStore } from '@/stores/index'
import utils from '@/utils/utils'

// 实例化仓库
const userStore = useUserStore()
let userState = userStore.state.userInfo
console.log(userState)

// 获取全局挂载的属性
const { $api } = getCurrentInstance().appContext.config.globalProperties

const activeName = ref('first')
const currentList = ref([])
const noticeType = reactive({
  type: 0
})

// 请求公告数据
const getNoticeList = async () => {
  try {
    const list = await $api.getNoticeList(noticeType)
    let newList = list.map((item) => {
      if (item.noticeContent) {
        item.noticeContent = item.noticeContent.replace(/<\/?p>/g, '')
      }
      return item
    })
    currentList.value = newList
    // console.log(currentList)
  } catch (error) {
    throw new Error(error)
  }
}

const handleClick = (tab) => {
  if (tab.props.name == 'first') {
    noticeType.type = 0
  } else if (tab.props.name == 'second') {
    noticeType.type = 1
  }
  getNoticeList()
  // console.log(tab, event)
}

onMounted(() => {
  getNoticeList()
})

// 通知/公告样式
const itemClass = (noticeType) => {
  return {
    'notification-style': noticeType.type === '0',
    'announcement-style': noticeType.type === '1'
  }
}

// 通知/公告字体
const getNoticeText = (noticeType) => {
  return noticeType === '0' ? '通知' : '公告'
}

// 判断权限
const getRole = (role) => {
  return Number(role) === 0 ? '管理员' : '员工'
}

defineExpose({ itemClass, getNoticeText })
</script>

<style>
.el-card {
  margin: 10px;
}

.mgb20 {
  margin-bottom: 20px;

  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    justify-content: space-around;

    .user-info-content {
      padding-left: 50px;
      flex: 1;
      font-size: 14px;
      color: #999;
    }

    .user-info-content div:first-child {
      font-size: 30px;
      color: #222;
    }

    .user-info-content div:last-child {
      margin-top: 15px;
    }
  }

  .user-info-list {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    line-height: 25px;
  }

  .user-info-list span {
    margin-left: 70px;
  }
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.el-progress {
  margin-top: 15px;
}

.current-list li {
  transition: all 0.5s ease;
}

.current-list li a {
  width: 100%;
  height: 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-list li h5 {
  font-size: 1rem;
  font-weight: normal;
  color: #666666;
  width: calc(100% - 10.25rem);
  position: relative;
  padding: 0 0 0 1.125rem;
}

.current-list li a:hover {
  padding-left: 4px;
}

.current-list li a:hover h5 {
  color: #0a3f89;
}

.current-list li span {
  font-size: 1rem;
  font-weight: normal;
  color: #666666;
}

.current-list li h5:before {
  content: '';
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  background: #0a3f89;
  border-radius: 50%;
  top: 50%;
  margin-top: -2.5px;
}

.overfloat-dot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.el-tabs .el-tab-pane {
  border: none;
}

.notification-style {
  width: 2rem;
  height: 1rem;
  border: 1px solid orange;
}

.announcement-style {
  width: 2rem;
  height: 1rem;
  border: 1px solid greenyellow;
}
</style>
